<template>
  <div class="app-container">
    <el-descriptions class="margin-top"  :column="3"  border>
      <el-descriptions-item>
        <template slot="label">
          姓名
        </template>
        {{form.driverName || ''}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          手机号
        </template>
        {{form.driverMobile || ''}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          性别
        </template>
        {{genderFormat(form)}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          代驾经验
        </template>
        {{experienceFormat(form)}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          接单区域
        </template>
        {{form.province}} ,{{form.city}}, {{form.town}}
      </el-descriptions-item>
    </el-descriptions>

    <el-row style="margin-top: 20px;margin-bottom: 20px">
      <el-col :span="5" v-for="(img, index) in imgPreList" :key="img" :offset="index > 0 ? 1 : 0" >
        <el-image :src="img" :fit="fit" :preview-src-list="imgPreList" :z-index="zindex" @click.stop="handleClickItem" style="width: 200px; height: 200px"></el-image>
      </el-col>
    </el-row>


    <el-form :model="auditForm" ref="auditForm"  label-width="68px">
      <el-form-item label="审核结果" prop="gender">
        <el-select v-model="auditForm.perfectAuditState"  clearable size="small">
          <el-option
            v-for="dict in auditState"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="审核备注" prop="perfectAuditExplain">
        <el-input
          v-model="auditForm.perfectAuditExplain"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSubmit">提   交 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { getDriver,   auditDriver} from "@/api/driver/driver";
  import defaultSettings from '@/settings'
  export default {
    name: "DriverApplyAudit",
    props: {
      driverId: {
        type: Number
      }
    },
    data() {
      return {
        fit: 'fill',
        zindex:999,
        ossPreview: defaultSettings.ossPreview,
        // 遮罩层
        loading: true,
        destroy: true,
        // 性别数据字典
        genderOptions: [],
        // 状态数据字典
        enableOptions: [],
        // 驾驶经验数据字典
        experienceOptions: [],
        // 表单校验
        rules: {
          perfectAuditState:[
            { required: true, message: "请选择审核结果", trigger: "blur" }
          ]
        },
        form: {},
        auditForm: {
          id: this.driverId,
          perfectAuditState: '',
          perfectAuditExplain: ''
        },
        imgPreList:[],
        auditState: [{
          label: '审核通过',
          value: '2'
        }, {
          label: '审核拒绝',
          value: '3'
        }],
      };
    },
    created() {
      this._getDriver();
      this.getDicts("sys_user_sex").then(response => {
        this.genderOptions = response.data;
      });
      this.getDicts("driving_experience").then(response => {
        this.experienceOptions = response.data;
      });
    },
    methods: {
     _getDriver(){
       getDriver(this.driverId).then(response => {
         this.form = response.data;
         this.wrapImgPreList();
       });
     },
      wrapImgPreList(){
        this.imgPreList.push(this.ossPreview + this.form.idcardFront)
        this.imgPreList.push(this.ossPreview + this.form.idcardBack)
        this.imgPreList.push(this.ossPreview + this.form.driverLicense)
        this.imgPreList.push(this.ossPreview + this.form.driverLicenseBack)
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getDriver(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改代驾司机";
          var coors = this.form.coordinate.split(",");
          this.postForm.longitude = coors[0];
          this.postForm.latitude = coors[1];
          this.postForm.detailedAddress = this.form.locPoi;
        });
      },

      /** 提交按钮 */
      handleSubmit: function () {
        this.$refs["auditForm"].validate(valid => {
          if (valid) {
            auditDriver(this.auditForm).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.$emit("handleDriverAudit");
              } else {
                this.msgError(response.msg);
              }
            });
          }
        });
      },
      handleClose: function () {
        this.$emit("handleDriverAudit");
      },
      genderFormat(row, column) {
        return this.selectDictLabel(this.genderOptions, row.gender);
      },
      experienceFormat(row, column) {
        return this.selectDictLabel(this.experienceOptions, row.experience);
      },
    }
  };
</script>
